<template>
  <div class="m-map">
    <div id="js-container" class="map"></div>
  </div>
</template>

<script>
import remoteLoad from "../utils/remoteLoad.js"
import { MapKey } from "../config/config"

let AMap
let AMapUI
let map
export default {
  props: ["province", "city", "counties"],
  data () {
    return {
      markerInfos: [],
      cluster: [],
      markers: []
    }
  },
  watch: {
    markerInfos: function (newValue) {
      let _this = this
      newValue.map((item) => {
        _this.addMarker(
          item.value[0],
          item.value[1],
          item.name,
          item.value[2],
          item.value[3]
        )
      })

      map.plugin(["AMap.MarkerClusterer"], function () {
        var sts = [{
          url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
          size: new AMap.Size(32, 32),
          offset: new AMap.Pixel(-16, -16)
        }, {
          url: "https://a.amap.com/jsapi_demos/static/images/green.png",
          size: new AMap.Size(32, 32),
          offset: new AMap.Pixel(-16, -16)
        }, {
          url: "https://a.amap.com/jsapi_demos/static/images/orange.png",
          size: new AMap.Size(36, 36),
          offset: new AMap.Pixel(-18, -18)
        }, {
          url: "https://a.amap.com/jsapi_demos/static/images/red.png",
          size: new AMap.Size(48, 48),
          offset: new AMap.Pixel(-24, -24)
        }, {
          url: "https://a.amap.com/jsapi_demos/static/images/darkRed.png",
          size: new AMap.Size(48, 48),
          offset: new AMap.Pixel(-24, -24)
        }]

        _this.cluster = new AMap.MarkerClusterer(map, _this.markers, { styles: sts, gridSize: 80 })
        console.log("cluster:", _this.cluster.getMap())
      })

    },
  },
  methods: {
    // 实例化地图
    initMap () {
      let _this = this
      console.log("initMap", window)
      AMap = window.AMap
      AMapUI = window.AMapUI
      AMapUI.loadUI(["misc/PositionPicker"], () => {
        let mapConfig = {
          resizeEnable: true,
          mapStyle: "amap://styles/52787a3119fdf6e3d0d9fe858462deb0",
          center: [108.95119, 34.278319],
          zoom: 5,
          viewMode: "3D",
          pinch: 45,
        }
        map = new AMap.Map("js-container", mapConfig)

        map.on("complete", function () {
          console.log("地图加载完成！")
          _this.loadData()
        })
      })
    },
    addMarker (left, right, unitArea, countNumber, sumcount) {
      let viaMarker = new AMap.Marker({
        position: new AMap.LngLat(left, right),
        // icon: icon,
        size: new AMap.Size(43, 41),
        offset: new AMap.Pixel(-30, -20),
        content: "",
      })
      viaMarker.setLabel({
        // offset: new AMap.Pixel(-150, -150),
        content: `<div class="map-mark-con"><span class="map-icon"></span><span class="area-name">${unitArea}</span><br/><span class="item-number">${countNumber}</span><span class="sum-count">${sumcount}</span></div>`,
      })
      // viaMarker.on("click", this.markerClick)
      this.markers.push(viaMarker)
      // map.setFitView(viaMarker)
      // map.add([viaMarker])
      // map.remove([viaMarker])

    },
    loadData () {
      this.$axios({
        methods: "get",
        url: "dashboard/statistics",
      }).then((res) => {
        let markInfoList = []
        console.log("res:", res)
        let dataList = res.data.industryStatsList.sort(
          (a, b) => b.number - a.number
        )
        dataList.map((item) => {
          if (item.number) {
            item.subCustomer.map((customer) => {
              markInfoList.push({
                name: customer.customerName,
                value: [
                  customer.longitude,
                  customer.latitude,
                  0,
                  `${customer.actualLoad.toFixed(2)}kw`,
                ],
              })
            })
          }
        })
        this.markerInfos = markInfoList
      })
    },
  },
  created () {
    if (window.AMap && window.AMapUI) {
      console.log("window.AMap", window.AMap)
      this.initMap()
    } else {
      console.log("123")
      let _this = this
      remoteLoad(`https://webapi.amap.com/maps?v=1.4.15&key=${MapKey}`)
        .then(() => {
          return remoteLoad("https://webapi.amap.com/ui/1.0/main.js")
        })
        .then(function () {
          console.log("_this")
          return _this.initMap()
        })
        .catch(function (e) {
          console.log("failed:" + e)
        })

      console.log("初始化", window.AMap)
      //   this.initMap();
    }
  },
  //   mounted() {
  //     this.$axios({
  //       methods: "get",
  //       url: "dashboard/statistics",
  //     }).then((res) => {
  //       let markInfoList = [];
  //       console.log("res:", res);
  //       let dataList = res.data.industryStatsList.sort(
  //         (a, b) => b.number - a.number
  //       );
  //       dataList.map((item) => {
  //         if (item.number) {
  //           item.subCustomer.map((customer) => {
  //             markInfoList.push({
  //               name: customer.customerName,
  //               value: [
  //                 customer.longitude,
  //                 customer.latitude,
  //                 0,
  //                 `${customer.actualLoad.toFixed(2)}kw`,
  //               ],
  //             });
  //           });
  //         }
  //       });
  //       this.markerInfos = markInfoList;
  //     });
  //   },
};
</script>

<style lang="less">
// .map-box {
//   width: 100%;
//   height: 100%;
// }

// .amap-logo {
//   display: none !important;
// }
// .amap-copyright {
//   opacity: 0;
// }
// .amap-marker-label {
//   position: relative;
//   background: transparent;
//   border: 0;
// }
// .map-icon {
//   position: absolute;
//   width: 43px;
//   height: 41px;
//   background: url(../assets/img/one-symbol.png);
//   left: 0;
//   top: 0;
// }
// .area-name {
//   position: absolute;
//   width: 100px;
//   text-align: center;
//   top: 40px;
//   left: -32px;
//   font-size: 16px;
//   cursor: pointer;
// }
// .amap-marker-label:hover {
//   transform: scale(1.05);
//   transform-origin: center;
// }
// .item-number {
//   color: #000000;
//   font-size: 11px;
//   position: absolute;
//   top: 5px;
//   left: 0;
//   text-align: center;
//   width: 43px;
//   cursor: pointer;
// }
// .sum-count {
//   cursor: pointer;
//   left: 38px;
//   top: -17px;
//   position: absolute;
//   padding: 0 12px;
//   height: 22px;
//   background: #ccff00;
//   border-radius: 10px;
//   line-height: 22px;
//   -webkit-box-shadow: 0px 2px 4px 0px rgb(0 0 0%);
//   box-shadow: 0px 2px 4px 0px rgb(0 0 0%);
//   &:after {
//     content: '';
//     position: absolute;
//     width: 10px;
//     width: 0;
//     height: 0;
//     border-top: 7px solid transparent;
//     border-right: 15px solid #ccff00;
//     border-bottom: 0px solid transparent;
//     left: -13px;
//     bottom: 2px;
//     transform: rotate(-19deg);
//   }
// }
// .amap-icon {
//   display: none;
// }
</style>
